<template>
    <div class="top">
        <div class="left">
            <span class="lbtn" @click="goHome">首页</span>
        </div>
        <div class="center">
            <div class="title">智慧旅游可视化大数据平台</div>
        </div>
        <div class="right">
            <span class="rbtn">统计报告</span>
            <span class="time">当前时间：{{ time }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup name="Top">
    import { useRouter } from 'vue-router'
    import moment from 'moment'
    import {ref,onMounted,onBeforeUnmount} from 'vue'

    // 获取路由器对象
    let $router=useRouter()
    // 存储当前的事件
    let time=ref(moment().format('YYYY年MM月DD日 HH:mm:ss'))
    let timer=ref<number>(0)

    // 点击首页按钮回到首页
    function goHome(){
        $router.push('/home')
    }

    // 组件挂载完毕，实时更新时间
    onMounted(()=>{
        timer.value=setInterval(()=>{
            time.value=moment().format('YYYY年MM月DD日 HH:mm:ss')
        },1000)
    })

    // 组件销毁，清除定时器
    onBeforeUnmount(()=>{
        clearInterval(timer.value)
    })

</script>

<style scoped lang="scss">
    .top{
        width: 100%;
        height: 100%;
        display: flex;
        background-size: cover;
    }

    .left{
        flex:1.5;
        background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
        background-size: cover;
    }

    .lbtn{
        width: 150px;
        height: 40px;
        float: right;
        background: url(../../images/dataScreen-header-btn-bg-l.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 40px;
        color: #29cfff;
        font-size: 20px;
        cursor:pointer;
    }

    .center{
        flex:2;
    }

    .title{
        width: 100%;
        height: 74px;
        background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 74px;
        color: #29cfff;
        font-size: 30px;
    }

    .right{
        flex:1.5;
        background: url(../../images/dataScreen-header-left-bg.png) no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .rbtn{
        width: 150px;
        height: 40px;
        background: url(../../images/dataScreen-header-btn-bg-r.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 40px;
        color: #29cfff;
        font-size: 20px;
    }

    .time{
        color: #29cfff;
        font-size: 20px;
        margin-right: 10px;
    }
</style>